<template>
  <a-card :bordered="false" :body-style="{padding: 8}" :head-style="{fontSize: '18px'}">
    <template #title>
      <div class="card-header-icon">
        <img src='@/assets/agent-icon.png' />
        <span>代理商排行</span>
      </div>
    </template>
    <template #extra>
      <a-space size="middle" class="analysis-tabs-extra">

        <a-select
          v-model:value="search.dataType"
          placeholder="报备单状态"
          @change="reloadUser"
        >
          <a-select-option value="1" selected>报备件数</a-select-option>
          <a-select-option value="2">成交件数</a-select-option>
        </a-select>

        <!--        代理商下拉-->
<!--        <a-select
          v-if="user.roleId !== '3' && user.roleId !== '4'"
          v-model:value="search.agentId"
          placeholder="选择代理商"
          @change="reloadAgent"
          allowClear
        >
          <a-select-option v-for="agent in agentList" :key="agent.id" :value="agent.id">
            {{ agent.name }}
          </a-select-option>
        </a-select>-->
        <!--        员工下拉-->
<!--        <a-select v-model:value="search.selectUserId"
                  placeholder="选择员工"
                  @change="reloadUser"
                  allowClear
        >
          <a-select-option v-for="agentUser in agentUserList" :key="agentUser.userId" :value="agentUser.userId">
            {{ agentUser.realName }}
          </a-select-option>
        </a-select>-->
      </a-space>
    </template>

    <a-row :gutter="16">
      <a-col :lg="12" :md="24" :sm="24" :xs="24">
        <div>
<!--          <a-tabs :size="'small'" class="monitor-card-tabs">-->
<!--            <a-tab-pane tab="单月排行" key="saleroom">-->
              <a-row :gutter="16">
                <a-col :lg="24" :md="24" :sm="24" :xs="24">
                  <a-table row-key="sort"
                           :columns="columns"
                           :data-source="monthData"
                           :pagination="false"
                           :size="'small'"
                           :bordered="true"
                           :scroll="{ y: 230 }">
                    <template #title>
                      <a-button size="middle" class="ele-text-primary table-header-button-left">单月排行</a-button>
                      <a-button
                        v-if="user.roleId !== '3' && user.roleId !== '4'&& user.roleId !== '5'"
                        @click="exportExcelMonth" type="primary" size="small"
                        class="table-header-button-right">
                        <template #icon>
                          <DownloadOutlined />
                        </template>
                        导出
                      </a-button>

                    </template>
                    <template #sort="{ record }">
                      <img v-if="record.sort === 1" src='@/assets/tubiaoa.png' class="ranking-image" alt="">
                      <img v-if="record.sort === 2" src='@/assets/tubiaob.png' class="ranking-image" alt="">
                      <img v-if="record.sort === 3" src='@/assets/tubiaoc.png' class="ranking-image" alt="">
                      <ele-tag v-if="record.sort === 4" color="orange" shape="circle" size="mini" style="margin: 3px 0 3px 7px">{{ record.sort }}</ele-tag>
                      <ele-tag v-if="record.sort === 5" color="orange" shape="circle" size="mini" style="margin: 3px 0 3px 7px">{{ record.sort }}</ele-tag>
                      <ele-tag v-if="record.sort > 5" size="mini" style="margin-left: 8px">{{ record.sort }}
                      </ele-tag>
                    </template>
                  </a-table>
                </a-col>
              </a-row>
<!--            </a-tab-pane>-->
<!--            <template #tabBarExtraContent>-->
<!--              <a-space size="middle" class="analysis-tabs-extra">-->
<!--                &lt;!&ndash;导出Excel&ndash;&gt;-->
<!--                <a-button-->
<!--                  v-if="user.roleId !== '3' && user.roleId !== '4'&& user.roleId !== '5'"-->
<!--                  @click="exportExcelMonth" type="primary" size="small"-->
<!--                  style="background-color: rgb(254,108,17);border:rgb(254,108,17);">-->
<!--                  <template #icon>-->
<!--                    <DownloadOutlined />-->
<!--                  </template>-->
<!--                  导出-->
<!--                </a-button>-->
<!--              </a-space>-->
<!--            </template>-->
<!--          </a-tabs>-->
        </div>
      </a-col>
      <a-col :lg="12" :md="24" :sm="24" :xs="24">
        <div>
<!--          <a-tabs :size="'small'" class="monitor-card-tabs">-->
<!--            <a-tab-pane tab="累计排行" key="saleroom">-->
              <a-row :gutter="16">
                <a-col :lg="24" :md="24" :sm="24" :xs="24">
                  <a-table row-key="sort"
                           :columns="columns"
                           :data-source="allTimeData"
                           :pagination="false"
                           :size="'small'"
                           :bordered="true"
                           :scroll="{ y: 230 }">
                    <template #title>
                      <a-button size="middle" class="ele-text-primary table-header-button-left">累计排行</a-button>
                      <a-button
                        v-if="user.roleId !== '3' && user.roleId !== '4'&& user.roleId !== '5'"
                        @click="exportExcelAllTime" type="primary" size="small"
                        class="table-header-button-right">
                        <template #icon>
                          <DownloadOutlined />
                        </template>
                        导出
                      </a-button>

                    </template>
                    <template #sort="{ record }">
                      <img v-if="record.sort === 1" src='@/assets/tubiaoa.png' class="ranking-image" alt="">
                      <img v-if="record.sort === 2" src='@/assets/tubiaob.png' class="ranking-image" alt="">
                      <img v-if="record.sort === 3" src='@/assets/tubiaoc.png' class="ranking-image" alt="">
                      <ele-tag v-if="record.sort === 4" color="orange" shape="circle" size="mini" style="margin: 3px 0 3px 7px">{{ record.sort }}</ele-tag>
                      <ele-tag v-if="record.sort === 5" color="orange" shape="circle" size="mini" style="margin: 3px 0 3px 7px">{{ record.sort }}</ele-tag>
                      <ele-tag v-if="record.sort > 5" size="mini" style="margin-left: 8px">{{ record.sort }}</ele-tag>
                    </template>
                  </a-table>
                </a-col>
              </a-row>
<!--            </a-tab-pane>-->
<!--            <template #tabBarExtraContent>-->
<!--              <a-space size="middle" class="analysis-tabs-extra">-->
<!--                &lt;!&ndash;导出Excel&ndash;&gt;-->
<!--                <a-button-->
<!--                  v-if="user.roleId !== '3' && user.roleId !== '4'&& user.roleId !== '5'"-->
<!--                  @click="exportExcelAllTime" type="primary" size="small"-->
<!--                  style="background-color: rgb(254,108,17);border:rgb(254,108,17);">-->
<!--                  <template #icon>-->
<!--                    <DownloadOutlined />-->
<!--                  </template>-->
<!--                  导出-->
<!--                </a-button>-->
<!--              </a-space>-->
<!--            </template>-->
<!--          </a-tabs>-->
        </div>
      </a-col>
    </a-row>
  </a-card>
</template>

<script>
import {} from '@ant-design/icons-vue';
import { DashboardApi } from '@/api/DashboardApi';
import { WebUserApi } from '@/api/WebUserApi';
import { utils, writeFile } from 'xlsx';

export default {
  name: 'AnalysisSales',
  components: {},
  props: {
    region: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      // 用户信息
      user: {},
      // 销售业绩代理商列表
      agentList: [],
      // 销售业绩代理商员工列表
      agentUserList: [],
      // 销售业绩搜索参数
      search: {
        region: null,
        selectUserId: null,
        agentId: null,
        dataType: '1'
      },
      // 表格数据
      monthData: [],
      allTimeData: [],

      columns: [
        {
          title: '排名',
          dataIndex: 'sort',
          width: 120,
          slots: { customRender: 'sort' }
        },
        {
          title: '数量',
          dataIndex: 'number',
          width: 160
        },
        {
          title: '代理商名称',
          dataIndex: 'name',
          ellipsis: true,
          width: 160
        }
      ]
    };
  },
  mounted() {
    this.getUser();
    this.getAgentList();
    this.getAgentUserList();
    this.getMonthData();
    this.getAllTimeData();
  },
  watch:{
    region() {
      console.log('刷新列表2');
      this.search.region = this.region;
      this.reloadAgent();
      this.getAgentList();
    },
  },
  methods: {
    // 获取用户信息
    async getUser() {
      const res = await DashboardApi.getUser();
      this.user = res.data;
    },

    // 加载代理商下拉数据
    async getAgentList() {
      const res = await DashboardApi.findAgentList({region: this.search.region});
      this.agentList = res.data;
    },

    // 加载代理商员工列表
    async getAgentUserList() {
      const res = await WebUserApi.getAgentUserListByAgentId({ agentId: this.search.agentId, region: this.search.region });
      this.agentUserList = res.data;
    },

    // 单月数据
    async getMonthData() {
      if (!this.search.selectUserId) {
        this.search.selectUserId = null;
      }
      if (!this.search.agentId) {
        this.search.agentId = null;
      }
      this.search.timeRange = 1;
      const res = await DashboardApi.seniorityAgent(this.search);
      this.monthData = res.data;
    },
    // 全时间数据
    async getAllTimeData() {
      if (!this.search.selectUserId) {
        this.search.selectUserId = null;
      }
      if (!this.search.agentId) {
        this.search.agentId = null;
      }
      this.search.timeRange = 2;
      const res = await DashboardApi.seniorityAgent(this.search);
      this.allTimeData = res.data;
    },

    //代理商变更
    async reloadAgent() {
      this.search.selectUserId = null;
      this.getMonthData();
      this.getAllTimeData();
      this.getAgentUserList();
    },
    //员工变更
    async reloadUser() {
      this.getMonthData();
      this.getAllTimeData();
    },
    exportExcelMonth() {
      this.loading = true;
      let array = [
        [
          '排名',
          '件数',
          '代理商名称'
        ]
      ];
      this.monthData.forEach((d) => {
        array.push([
          d.sort,
          d.number,
          d.name
        ]);
      });
      writeFile(
        {
          SheetNames: ['代理商单月排行'],
          Sheets: {
            代理商单月排行: utils.aoa_to_sheet(array)
          }
        },
        '代理商单月排行.xlsx'
      );
      this.loading = false;
    },

    exportExcelAllTime() {
      this.loading = true;
      let array = [
        [
          '排名',
          '件数',
          '代理商名称'
        ]
      ];
      this.allTimeData.forEach((d) => {
        array.push([
          d.sort,
          d.number,
          d.name
        ]);
      });
      writeFile(
        {
          SheetNames: ['代理商累计排行'],
          Sheets: {
            代理商累计排行: utils.aoa_to_sheet(array)
          }
        },
        '代理商累计排行.xlsx'
      );
      this.loading = false;
    }
  }
};
</script>

<style scoped>
/* 统计卡片 */
.analysis-chart-card :deep(.ant-card-body) {
  padding: 16px 22px 12px 22px;
}

.analysis-chart-card-num {
  font-size: 30px;
}

.analysis-chart-card-content {
  height: 40px;
}

.analysis-chart-card :deep(.ant-divider) {
  margin: 12px 0;
}

/* 销售额、访问量 */
.monitor-card-tabs :deep(.ant-tabs-bar) {
  padding: 0;
}
.monitor-card-tabs :deep(.ant-tabs-tab) {
  padding-left: 0px;
  padding-right: 2px;
  margin: 0 !important;
  font-size: 16px;
}
.ant-tabs-ink-bar ant-tabs-ink-bar-animated {
  transform: translate3d(0px, 0px, 0px);

}

.monitor-card-tabs :deep(.ant-tabs-tabpane) {
  padding-bottom: 10px;
}

.demo-monitor-title {
  padding: 6px 20px;
}

.demo-monitor-rank-item {
  padding: 0 20px;
  margin-top: 18px;
}
.ranking-image{
  width: 36px;
}
/* 表格斑马样式 **/
/deep/.ant-table-tbody tr:nth-child(2n)
{
  background-color:#fcfcf2;
}

/deep/ .ant-table-thead .ant-table-row-cell-break-word{
  background-color:#fcfcf2;
}
.table-header-button-left{
  border: 0;
  background-color: #f1f7ff;
  font-weight: 500;
}
.table-header-button-right{
  background-color: rgb(254,108,17);
  border:rgb(254,108,17);
  float: right;
}
/deep/.ant-table-title{
  align-items: center;
  display: flex;
  justify-content: space-between;
}
/deep/.card-header-icon{
  display: flex;
  align-items: center;
}
/deep/.card-header-icon img{
  width: 30px;
}
/deep/.card-header-icon span{
  margin-left: 5px;
}
@media screen and (max-width: 880px) {
  .analysis-tabs-extra {
    display: none;
  }
}
</style>
